<template>
  <!--开题报告-->
  <div class="opening-report">
    <DesignCard :title="$t('graduationDesign.studentInfo')" v-if="actionType !== 'ADD' && actionType !== 'EDIT'">
      <el-form :model="studentForm" ref="studentForm" label-position="right" label-suffix="：" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.studentId')">
              <span>{{studentForm.studentId}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.name')">
              <span>{{studentForm.studentName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.college')">
              <span>{{studentForm.collegeI18n}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.major')">
              <span>{{studentForm.subjectName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('graduationDesign.direction')">
              <span>{{studentForm.directionName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </DesignCard>

    <DesignCard :title="$t('graduationDesign.graduationDesignOpeningReport')" :showExpand="actionType !== 'ADD' && actionType !== 'EDIT'">
      <el-form :model="openingReportForm" ref="openingReportForm" :rules="openingReportRules" label-position="right" label-suffix="：" label-width="150px" :disabled="actionType === 'REVIEW' || actionType === 'VIEW' || actionType === 'REVIEW_VIEW'">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectName')">
              <el-input v-model="openingReportForm.projectName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subtitle')">
              <el-input v-model="openingReportForm.subtitleName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.subjectBackground')" v-if="studentType === 'Arts'" prop="backGroundProject">
              <el-input type="textarea" v-model="openingReportForm.backGroundProject" :rows="6" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="100000"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="studentType === 'Arts' ? $t('graduationDesign.literatureReviewArts') : $t('graduationDesign.literatureReviewScience')" prop="journalReview">
              <el-input type="textarea" v-model="openingReportForm.journalReview" :rows="8" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="100000"></el-input>
            </el-form-item>
            <p class="float-right prompt-bottom" v-if="studentType === 'Arts'">{{$t('graduationDesign.literatureReviewRequirement')}}</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.programIntroductionMainContent')" v-if="studentType === 'Science'" prop="researchDirection">
              <el-input type="textarea" v-model="openingReportForm.researchDirection" :rows="6" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="100000"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="studentType === 'Arts' ? $t('graduationDesign.referenceArtsLabel') : $t('graduationDesign.referenceScienceLabel')" prop="reference">
              <el-input type="textarea" v-model="openingReportForm.reference" :rows="6" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="100000"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.researchContent')" v-if="studentType === 'Arts'" prop="researchDirection">
              <el-input type="textarea" v-model="openingReportForm.researchDirection" :rows="6" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="100000"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="edu-opertion-bar bottom-line" v-if="actionType === 'ADD' || actionType === 'EDIT'">
          <div class="float-right bottom-btn">
            <el-button @click="onCancel">{{$t('graduationDesign.cancel')}}</el-button>
            <el-button type="primary" @click="onSave">{{$t('graduationDesign.save')}}</el-button>
            <el-button type="primary" @click="onSubmit">{{$t('graduationDesign.submit')}}</el-button>
          </div>
        </div>
      </el-form>
    </DesignCard>

    <DesignCard :title="$t('graduationDesign.review')" v-if="actionType === 'REVIEW'">
      <el-form :model="reviewForm" ref="reviewForm" :rules="reviewRules" label-position="right" label-suffix="：" label-width="150px">
        <el-form-item :label="$t('graduationDesign.reviewOpioion')" prop="remark">
          <el-input type="textarea" v-model="reviewForm.remark" :rows="4" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="500"></el-input>
        </el-form-item>
        <div class="edu-opertion-bar">
          <div class="float-right bottom-btn">
            <el-button @click="onCancel">{{$t('graduationDesign.cancel')}}</el-button>
            <el-button type="danger" @click="onReject">{{$t('graduationDesign.reject')}}</el-button>
            <el-button type="primary" @click="onPass">{{$t('graduationDesign.pass')}}</el-button>
          </div>
        </div>
      </el-form>
    </DesignCard>

    <DesignCard :title="$t('graduationDesign.reviewProgress')" v-if="actionType === 'REVIEW_VIEW' || actionType === 'REVIEW'">
      <edu-table ref="reviewProgressTable" :data="progressData" :selection="false" :pagination="false">
        <edu-table-column :label="$t('graduationDesign.time')" prop="time" :formatter="formatDate" min-width="120"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.approvers')" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.approvorName}}【{{scope.row.approvorId}}】</span>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('graduationDesign.role')" prop="role" min-width="90"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.approvalResult')" prop="result" min-width="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result === 'COMMIT'" type="success">{{$t('graduationDesign.submit')}}</el-tag>
            <el-tag v-if="scope.row.result === 'Process'" type="success">{{$t('graduationDesign.pass')}}</el-tag>
            <el-tag v-if="scope.row.result === 'End'" type="info">{{$t('graduationDesign.over')}}</el-tag>
            <el-tag v-if="scope.row.result === 'Reject'" type="warning">{{$t('graduationDesign.rejected')}}</el-tag>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('graduationDesign.approvalRemark')" prop="content" min-width="120"></edu-table-column>
      </edu-table>
    </DesignCard>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/openingReport";
import filters from "common/src/filters";

export default {
  name: 'openingReportInfo',
  props: {
    studentForm: {
      type: Object,
      default: {}
    },
    openingReportForm: {
      type: Object,
      default: {}
    },
    progressData: {
      type: Array,
      default: []
    },
    actionType: {
      type: String,
      default: ""
    },
    //学生类型： 文科 "1" 、理科 "2"
    stuType: {
      type: String,
      default: "1"
    },
    roleId: {
      type: Number,
      default: 1
    },
    dataInfo:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      api: API,
      studentForm: {},
      openingReportRules: {
        backGroundProject: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' }
        ],
        journalReview: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' },
          // { min: 4000, max: 100000, message: this.$t('graduationDesign.journalReviewValidateMsg'), trigger: 'blur' }
        ],
        reference: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' }
        ],
        researchDirection: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' }
        ]
      },
      reviewForm: {
        remark: ''
      },
      reviewRules: {
        remark: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' }
        ]
      },
    };
  },
  created() {
    this.studentType = this.stuType === "1" ? "Arts" : "Science";
    if(this.dataInfo&&this.dataInfo.no){
      this.openingReportForm.flowNo=this.dataInfo.no;
    }
    console.log('approvalRank')
  },
  mounted() {
    this.reviewForm.remark = "";
  },
  methods: {
    formatDate(row, column, cellValue, index) {
      return filters.formatDate(cellValue, "yyyy/MM/dd hh:mm:ss");
    },
    // 保存
    onSave() {
      this.$refs.openingReportForm.validate(valid => {
        if (valid) {
          this.$emit("opening-report-save", this.openingReportForm, this.actionType);
        } else {
          return false;
        }
      });
    },
    // 提交
    onSubmit() {
      this.$refs.openingReportForm.validate(valid => {
        if (valid) {
          this.$emit("opening-report-submit", this.openingReportForm);
        } else {
          return false;
        }
      });
    },
    // 通过
    onPass() {
       if(this.dataInfo&&this.dataInfo.no){
          this.openingReportForm.flowNo=this.dataInfo.no;
        }
      const params = {
        idList: [this.openingReportForm.flowNo],
        desc: this.reviewForm.remark,
        status: "End",
        approvalRank: this.roleId
      };
      this.$refs.reviewForm.validate(valid => {
        if (valid) {
          this.$emit("opening-report-pass", params, "End");
        } else {
          return false;
        }
      });
    },
    // 驳回
    onReject() {
      if(this.dataInfo&&this.dataInfo.no){
        this.openingReportForm.flowNo=this.dataInfo.no;
      }
      const params = {
        idList: [this.openingReportForm.flowNo],
        desc: this.reviewForm.remark,
        status: "Reject",
        approvalRank: this.roleId
      };
      this.$refs.reviewForm.validate(valid => {
        if (valid) {
          this.$emit("opening-report-reject", params, "Reject");
        } else {
          return false;
        }
      });
    },
    // 取消
    onCancel() {
      if(this.dataInfo&&this.dataInfo.no){
        console.log(1,'oooo')
        this.$router.go(-1);
      }else{
        this.$emit("opening-report-cancel");
      }

    }
  }
}
</script>
<style lang="scss" scoped>
.opening-report {
    .bottom-line {
        border-top: 1px solid #dcdfe6;
        .bottom-btn {
            margin-top: 20px;
        }
    }
    .prompt-bottom {
        margin-top: 0px;
        margin-bottom: 15px;
    }
}
</style>
